import React from 'react'
import { NavLink } from 'react-router-dom'
import RouterView from '../router/RouterView'
import { IRouteItem } from '../utils/interface'
import './main.scss'
interface Iprops{
  routes:IRouteItem[]
}
const Main: React.FC<Iprops> = (props) => {
  return (
    <div className='main'>
      <div className="con">
        <RouterView routes={props.routes}></RouterView>
      </div>
      <div className="nav">
        <div>
          <NavLink to="/main/index" activeStyle={{color:"#A878E8"}} className="NavLink"><svg  className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4085" width="20" height="20"><path d="M880.56 340.86L531 132.74a31.997 31.997 0 0 0-32.56-0.11L143.63 340.76a31.982 31.982 0 0 0-15.81 27.6V799.7c0 17.67 14.32 32 32 32h704.36c17.68 0 32-14.33 32-32V368.36a32 32 0 0 0-15.62-27.5zM832.18 767.7H191.82V386.69L514.51 197.4l317.67 189.15V767.7z" p-id="4086"></path><path d="M544 538.99v138.37c0 14.83-14.33 26.86-32 26.86s-32-12.03-32-26.86V538.99c0-14.83 14.33-26.86 32-26.86s32 12.03 32 26.86z" p-id="4087"></path></svg>首页</NavLink>
          <NavLink to="/main/classify" activeStyle={{color:"#A878E8"}} className="NavLink"><svg  className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5470" width="20" height="20"><path d="M369.06666667 468.48H180.37333333c-51.2 0-92.90666667-41.70666667-92.90666666-92.90666667V186.88c0-51.2 41.70666667-92.90666667 92.90666666-92.90666667H369.06666667c51.2 0 92.90666667 41.70666667 92.90666666 92.90666667v188.69333333c0 51.2-41.70666667 92.90666667-92.90666666 92.90666667z m-188.69333334-321.06666667c-21.76 0-39.57333333 17.70666667-39.57333333 39.57333334v188.69333333c0 21.76 17.70666667 39.57333333 39.57333333 39.57333333H369.06666667c21.76 0 39.57333333-17.70666667 39.57333333-39.57333333v-188.8c0-21.76-17.70666667-39.57333333-39.57333333-39.57333333H180.37333333zM369.06666667 928.10666667H180.37333333c-51.2 0-92.90666667-41.70666667-92.90666666-92.90666667V646.50666667c0-51.2 41.70666667-92.90666667 92.90666666-92.90666667H369.06666667c51.2 0 92.90666667 41.70666667 92.90666666 92.90666667V835.2c0 51.2-41.70666667 92.90666667-92.90666666 92.90666667z m-188.69333334-321.06666667c-21.76 0-39.57333333 17.70666667-39.57333333 39.57333333V835.2c0 21.76 17.70666667 39.57333333 39.57333333 39.57333333H369.06666667c21.76 0 39.57333333-17.70666667 39.57333333-39.57333333V646.50666667c0-21.76-17.70666667-39.57333333-39.57333333-39.57333334H180.37333333zM828.90666667 928.10666667H640.21333333c-51.2 0-92.90666667-41.70666667-92.90666666-92.90666667V646.50666667c0-51.2 41.70666667-92.90666667 92.90666666-92.90666667h188.69333334c51.2 0 92.90666667 41.70666667 92.90666666 92.90666667V835.2c0 51.2-41.70666667 92.90666667-92.90666666 92.90666667z m-188.69333334-321.06666667c-21.76 0-39.57333333 17.70666667-39.57333333 39.57333333V835.2c0 21.76 17.70666667 39.57333333 39.57333333 39.57333333h188.69333334c21.76 0 39.57333333-17.70666667 39.57333333-39.57333333V646.50666667c0-21.76-17.70666667-39.57333333-39.57333333-39.57333334H640.21333333zM734.61333333 476.58666667c-24.85333333 0-48.21333333-9.6-65.70666666-27.09333334L566.4 346.88c-17.49333333-17.49333333-27.09333333-40.85333333-27.09333333-65.70666667 0-24.85333333 9.6-48.21333333 27.09333333-65.70666666l102.61333333-102.61333334c17.49333333-17.49333333 40.85333333-27.09333333 65.70666667-27.09333333 24.85333333 0 48.21333333 9.6 65.70666667 27.09333333l102.61333333 102.61333334c17.49333333 17.49333333 27.09333333 40.85333333 27.09333333 65.70666666 0 24.85333333-9.6 48.21333333-27.09333333 65.70666667l-102.61333333 102.61333333c-17.70666667 17.49333333-40.96 27.09333333-65.81333334 27.09333334zM706.66666667 411.73333333c7.46666667 7.46666667 17.38666667 11.52 27.94666666 11.52 10.56 0 20.58666667-4.05333333 27.94666667-11.52l102.61333333-102.61333333c7.46666667-7.46666667 11.52-17.38666667 11.52-27.94666667 0-10.56-4.05333333-20.58666667-11.52-27.94666666l-102.61333333-102.61333334c-7.46666667-7.46666667-17.38666667-11.52-27.94666667-11.52-10.56 0-20.58666667 4.05333333-27.94666666 11.52l-102.61333334 102.61333334c-7.46666667 7.46666667-11.52 17.38666667-11.52 27.94666666 0 10.56 4.05333333 20.58666667 11.52 27.94666667l102.61333334 102.61333333z" fill="#515151" p-id="5471"></path></svg>分类</NavLink>
          <NavLink to="/main/message" activeStyle={{color:"#A878E8"}} className="NavLink"><svg  className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7561" width="20" height="20"><path d="M512.17 895.86h-0.22c-9.66-0.07-18.78-4.5-24.8-12.06l-92.28-115.79H160.09c-17.67 0-32-14.33-32-32V223.87c0-17.67 14.33-32 32-32h704.47c17.67 0 32 14.33 32 32v512.14c0 17.67-14.33 32-32 32H632.12l-95.2 116.14a32.03 32.03 0 0 1-24.75 11.71zM192.09 704.01h218.19c9.74 0 18.95 4.44 25.02 12.06l77.22 96.89 79.7-97.23a31.983 31.983 0 0 1 24.75-11.71h215.59V255.87H192.09v448.14z" p-id="7562"></path><path d="M312.25 504.41m-56.2 0a56.2 56.2 0 1 0 112.4 0 56.2 56.2 0 1 0-112.4 0Z" p-id="7563"></path><path d="M512 504.41m-56.2 0a56.2 56.2 0 1 0 112.4 0 56.2 56.2 0 1 0-112.4 0Z" p-id="7564"></path><path d="M711.95 504.41m-56.2 0a56.2 56.2 0 1 0 112.4 0 56.2 56.2 0 1 0-112.4 0Z" p-id="7565"></path></svg>消息</NavLink>
          <NavLink to="/main/my" activeStyle={{color:"#A878E8"}} className="NavLink"><svg  className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13455" width="20" height="20"><path d="M886.4 704l-177.92-123.306667a21.333333 21.333333 0 0 1-2.773333-34.346666 265.173333 265.173333 0 0 0 82.986666-192A273.493333 273.493333 0 0 0 512 85.333333a273.493333 273.493333 0 0 0-277.333333 269.44 265.173333 265.173333 0 0 0 82.986666 192 21.333333 21.333333 0 0 1-2.773333 34.346667L137.6 704a22.826667 22.826667 0 0 0-9.6 19.2v148.053333A67.413333 67.413333 0 0 0 195.84 938.666667h632.32A67.413333 67.413333 0 0 0 896 871.253333V723.2a22.826667 22.826667 0 0 0-9.6-19.2z m-58.24 145.28a22.4 22.4 0 0 1-22.613333 21.333333H218.453333a22.4 22.4 0 0 1-22.613333-21.333333v-91.733333a22.826667 22.826667 0 0 1 9.6-18.56l196.693333-136.746667a44.373333 44.373333 0 0 0-2.56-74.453333l-3.626666-2.346667a203.306667 203.306667 0 0 1-94.293334-170.666667 210.346667 210.346667 0 0 1 420.693334 0 203.306667 203.306667 0 0 1-94.293334 170.666667l-3.626666 2.346667a44.373333 44.373333 0 0 0-2.56 74.453333l196.693333 136.746667a22.826667 22.826667 0 0 1 9.6 18.56z" p-id="13456"></path><path d="M512 624.213333a33.92 33.92 0 0 0-33.92 33.706667v112.426667a33.92 33.92 0 0 0 67.84 0v-112.426667A33.92 33.92 0 0 0 512 624.213333z" p-id="13457"></path></svg>我的</NavLink>
        </div>
      </div>
    </div>
  )
}
export default Main